<template>
	<view>
		<view class="publish_view">
			<view class="biaoti_view">
				<input @input="titleChange"
					style="font-size: 28rpx; font-weight: 700; height: 36rpx; width: calc(100% - 80rpx); color: #333333"
					maxlength="20" placeholder="请输入笔记标题" placeholder-style="color: #CCCCCC" />
				<label
					style="margin-left: auto; margin-right: 0; color: #cccccc; font-size: 28rpx">{{ titleNum }}/20</label>
			</view>
			<view class="dynamic_content_view">
				<textarea @input="experienceChange"
					style="width: 100%; height: 320rpx; font-size: 28rpx; color: #999999"
					placeholderStyle="color: #CCCCCC" maxlength="2000" placeholder="分享你的心得和体会"></textarea>
				<label style="
                        margin-bottom: 0;
                        margin-top: auto;
                        margin-left: auto;
                        margin-right: 0;
                        color: #cccccc;
                        font-size: 28rpx;
                    ">{{ experienceNum }}/2000</label>
			</view>
			<view scroll-x class="upload_view">
				<u-upload class="upload_view_s" :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
					:maxCount="9" multiple height="176" width="176">
					<image style="width: 176rpx; height: 176rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/addImage.png">
					</image>
				</u-upload>
			</view>
		</view>
		<view @click="goToTopic" v-if="form.topicId == ''" class="publish_huati">
			<label style="color: #191f19; font-size: 28rpx">参与话题</label>
			<view style="margin-left: auto; display: flex; flex-direction: row-reverse; align-items: center">
				<image style="width: 12rpx; height: 24rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/publish_right_next.png">
				</image>
				<label style="margin-right: 10rpx; color: #999999; font-size: 24rpx">选择合适的话题会获得更多赞</label>
			</view>
		</view>
		<view @click="goToTopic" v-if="form.topicId != ''" class="publish_huati">
			<view class="huati_tag">
				<view class="huati_tag_title">
					<view class="huati_logo">#</view>
					<label class="huati_content_tag">{{ form.topicName }}</label>
				</view>
			</view>
			<image style="width: 12rpx; height: 24rpx; margin-left: auto"
				src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/publish_right_next.png"></image>
		</view>
		<bottom-big-btn-view btnTitle="发布" @commit="commit"></bottom-big-btn-view>
		<dynamic_success_pop :show="isShowSuccess" @close="closeBack()" :integral="score"></dynamic_success_pop>
		<xunzhang-pop-view :show="isShowXunZhang" :list="medalList" @close="closeXunZhang()"></xunzhang-pop-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				form: {
					title: '',
					experience: '',
					topicId: '',
					topicName: '',
					pics: '',
				},
				isShowSuccess: false,
				score: 0,
				isShowXunZhang: false,
				medalList: [],
				titleNum: 0,
				experienceNum: 0,
				isSending: false,
			};
		},
		onLoad(option) {
			if (option.topicId && option.topicName) {
				this.form.topicId = option.topicId;
				this.form.topicName = option.topicName;
			}
		},
		onShow() {
			uni.$once('query', (query) => {
				this.form.topicId = query.topicId;
				this.form.topicName = query.topicName;
			});
		},
		methods: {
			titleChange(e) {
				if (e.detail.value.length > 20) {
					this.form.title = e.detail.value.slice(0, 20);
					this.titleNum = 20;
					return false;
				}
				this.form.title = e.detail.value;
				this.titleNum = e.detail.value.length;
			},
			experienceChange(e) {
				if (e.detail.value.length > 2000) {
					this.form.experience = e.detail.value.slice(0, 2000);
					this.experienceNum = 2000;
				} else {
					this.form.experience = e.detail.value;
					this.experienceNum = e.detail.value.length;
				}
			},
			closeXunZhang() {
				this.isShowXunZhang = false;
				uni.navigateBack();
			},
			closeBack() {
				this.backEvent();
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中',
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result,
						}),
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.request.baseUrl + '/mp-api/wx/common/upload',
						method: 'POST',
						header: {
							'x-accesstoken': this.request.getToken(),
						},
						filePath: url,
						name: 'file',
						success: (res) => {
							if (res.statusCode === 200) {
								var dataBack = JSON.parse(res.data);
								if (dataBack.code == 0) {
									resolve(dataBack.data.path);
								}
							}
						},
					});
				});
			},
			commit() {
				if (this.isSending == true) {
					return;
				}
				this.sendDynamicData();
			},
			sendDynamicData() {
				if (this.form.title === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入笔记标题',
					});
					return;
				}
				const effectiveTitle = this.form.title.replace(/\s/g, '');
				if (effectiveTitle === '') {
					uni.showToast({
						icon: 'none',
						title: '笔记标题不能为空格',
					});
					return;
				}

				if (this.form.experience === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入心得',
					});
					return;
				}
				const effectiveExperience = this.form.experience.replace(/\s/g, '');
				if (effectiveExperience === '') {
					uni.showToast({
						icon: 'none',
						title: '心得不能为空格',
					});
					return;
				}

				var pics = '';
				this.fileList.forEach((item) => {
					if (pics == '') {
						pics = item.url;
					} else {
						pics = pics + ',' + item.url;
					}
				});
				this.form.pics = pics;
				this.isSending = true;
				this.request.httpTokenJsonRequest('/mp-api/wx/trends/publish', this.form, 'POST', false).then((res) => {
					this.isSending = false;
					if (res.code == 0) {
						this.medalList.length = 0;
						if (res.data.score.score > 0) {
							this.isShowSuccess = true;
							this.score = res.data.score.score;
						} else {
							if (res.data.score.score == 0) {
								if (res.data.medal) {
									if (
										res.data.medal.name != '' &&
										res.data.medal.name != undefined &&
										res.data.medal.name != null
									) {
										this.medalList.length = 0;
										this.medalList.push(res.data.medal);
										this.isShowXunZhang = true;
									} else {
										uni.showModal({
											showCancel: false,
											confirmText: '确定',
											title: '发布成功',
											content: res.data.score.message,
											success: (res) => {
												if (res.confirm) {
													this.backEvent();
												}
											},
										});
									}
								} else {
									uni.showModal({
										showCancel: false,
										confirmText: '确定',
										title: '发布成功',
										content: res.data.score.message,
										success: (res) => {
											if (res.confirm) {
												this.backEvent();
											}
										},
									});
								}
							} else {
								uni.showToast({
									icon: 'success',
									title: '发布成功',
								});
								setTimeout(() => {
									this.backEvent();
								}, 500);
							}
						}
						if (res.data.medal) {
							if (
								res.data.medal.name != '' &&
								res.data.medal.name != undefined &&
								res.data.medal.name != null
							) {
								this.medalList.length = 0;
								this.medalList.push(res.data.medal);
							}
						}
					}
				});
			},
			backEvent() {
				if (this.medalList.length > 0) {
					this.isShowXunZhang = true;
					this.isShowSuccess = false;
				} else {
					uni.navigateBack();
				}
			},
			goToTopic() {
				uni.navigateTo({
					url: '/pages/community/topicList/topicList?fromPublish=1',
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.publish_view {
		width: 100%;
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		height: 730rpx;
		display: flex;
		flex-direction: column;
	}

	.biaoti_view {
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 0rpx;
		width: calc(100% - 60rpx);
		height: 104rpx;
		border-bottom: 2rpx #f6f6f6 solid;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.biaoti_text {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}

	.dynamic_content_view {
		margin: 30rpx;
		width: calc(100% - 60rpx);
		height: 358rpx;
		display: flex;
		flex-direction: column;
	}

	.dynamic_text {
		font-size: 28rpx;
		color: #999999;
	}

	.upload_view {
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		// height: 178rpx;
		overflow-x: auto;
		z-index: 100;
	}

	.upload_view_s {
		width: calc(100% - 60rpx);
	}

	.publish_huati {
		margin-top: 20rpx;
		width: 100%;
		margin: 20rpx 0 0;
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 112rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.huati_tag {
		height: 46rpx;
		border: 1rpx solid #cccccc;
		border-radius: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-right: 12rpx;

		max-width: 450rpx;
	}

	.huati_content_tag {
		margin-left: 6rpx;
		color: #333333;
		font-size: 24rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: calc(100% - 40rpx);
	}

	.huati_logo {
		background-color: #ff822e;
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 34rpx;
		color: #fff;
		margin-left: 6rpx;
		font-size: 24rpx;
	}
</style>
